<template>
	<view class="page">
		<!-- 顶部背景 + 导航 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill" />
		<u-navbar title="修改抽样单" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder />

		<view class="content">
			<!-- 大标题 -->
			<view class="page-title">山东省自然资源厅食用林产品质量安全监测抽样单</view>

			<!-- 基本信息 -->
			<view class="card">
				<view class="section-title">
					<view class="dot"></view>基本信息
				</view>
				<view class="form-grid">
					<view class="form-item">
						<text class="label">任务来源</text>
						<u-input v-model="form.taskSource" placeholder="请输入任务来源" />
					</view>
					<view class="form-item">
						<text class="label">采样编号</text>
						<u-input v-model="form.sampleNo" placeholder="自动或手动填写" />
					</view>
					<view class="form-item">
						<text class="label">检测场所</text>
						<u-input v-model="form.site" placeholder="请输入检测场所" />
					</view>
					<view class="form-item">
						<text class="label">检测类型</text>
						<u-input v-model="form.checkType" placeholder="风险监测/监督抽检等" />
					</view>
				</view>
			</view>

			<!-- 采样样品信息 -->
			<view class="card">
				<view class="section-title">
					<view class="dot"></view>采样样品信息
				</view>
				<view class="form-grid">
					<view class="form-item col-2">
						<text class="label required">样品名称</text>
						<u-input v-model="form.sampleName" placeholder="请输入样品名称" />
					</view>
					<view class="form-item">
						<text class="label">品种</text>
						<u-input v-model="form.variety" placeholder="请输入品种" />
					</view>
					<view class="form-item">
						<text class="label">种植面积</text>
						<u-input v-model="form.plantArea" placeholder="请输入种植面积" />
					</view>
					<view class="form-item">
						<text class="label">亩产量</text>
						<u-input v-model="form.yield" placeholder="请输入亩产量" />
					</view>
					<view class="form-item">
						<text class="label">单价</text>
						<u-input v-model="form.unitPrice" placeholder="请输入单价" />
					</view>
					<view class="form-item">
						<text class="label required">采样时间</text>
						<uni-datetime-picker type="datetime" v-model="form.sampleTime" :clear-icon="false"
							:border="false" placeholder="请选择采样时间" />
					</view>
					<view class="form-item">
						<text class="label">样品认证</text>
						<u-input v-model="form.cert" placeholder="请输入样品认证" />
					</view>
					<view class="form-item">
						<text class="label">商标</text>
						<u-input v-model="form.brand" placeholder="请输入商标" />
					</view>
					<view class="form-item">
						<text class="label required">采样数量</text>
						<u-input v-model="form.sampleNumber" placeholder="请输入采样数量" />
					</view>
					<view class="form-item">
						<text class="label">实验室编号</text>
						<u-input v-model="form.labNo" placeholder="请输入实验室编号" />
					</view>
					<view class="form-item">
						<text class="label">是否超期</text>
						<u-input v-model="form.isExpired" placeholder="请选择是否超期" />
					</view>
				</view>
			</view>

			<!-- 受检单位（个人） -->
			<view class="card">
				<view class="section-title">
					<view class="dot"></view>受检单位（个人）
				</view>
				<view class="form-grid">
					<view class="form-item">
						<text class="label">单位名称(个人)</text>
						<u-input v-model="form.orgName" placeholder="请输入单位名称(个人)" />
					</view>
					<view class="form-item">
						<text class="label required">联系人</text>
						<u-input v-model="form.linkman" placeholder="请输入联系人" />
					</view>
					<view class="form-item">
						<text class="label required">联系电话</text>
						<u-input v-model="form.mobile" placeholder="请输入联系电话" />
					</view>
					<view class="form-item col-2">
						<text class="label">采样点定位</text>
						<view class="inline">
							<u-input style="width: 200rpx;" class="flex-1" v-model="form.location"
								placeholder="请输入采样点定位" />
							<view class="ml8" @click="onChooseLocation">定位</view>
						</view>
					</view>
					<view class="form-item col-2">
						<text class="label">采样地点</text>
						<u-input v-model="form.address" placeholder="请输入采样地点" />
					</view>
				</view>

				<!-- 图片网格占位（可替换为真实图片/上传组件） -->
				<!-- <view class="image-grid">
					<view v-for="i in 9" :key="i" class="img-box">
						<u-icon name="photo" color="#c5e7d3" size="26" />
					</view>
				</view> -->
			</view>

			<!-- 下达任务单位 -->
			<view class="card">
				<view class="section-title">
					<view class="dot"></view>下达任务单位
				</view>
				<view class="form-grid">
					<view class="form-item col-2">
						<text class="label">单位名称</text>
						<u-input v-model="form.assignOrg" placeholder="请输入单位名称" />
					</view>
					<view class="form-item col-2">
						<text class="label">通信地址</text>
						<u-input v-model="form.assignAddr" placeholder="请输入通信地址" />
					</view>
				</view>
			</view>

			<!-- 抽样签章 -->
			<view class="card">
				<view class="section-title">
					<view class="dot"></view>抽样签章
				</view>
				<view class="form-grid">
					<view class="form-item">
						<text class="label required">采样人员</text>
						<u-input v-model="form.sampler" placeholder="请输入采样人员" />
					</view>
					<view class="form-item">
						<text class="label">受检单位(签字/盖章)</text>
						<view class="upload-box" @click="!form.signOrgUrl && onUploadSignature('org')">
							<image v-if="form.signOrgUrl" :src="form.signOrgUrl" class="upload-img" mode="aspectFit"
								@click.stop="previewSignature('org')" />
							<view v-else class="upload-inner">
								<u-icon name="plus" size="24" />
								<text class="up-txt">点击上传签名</text>
							</view>
							<view v-if="form.signOrgUrl" class="remove-btn" @click.stop="removeSignature('org')"><u-icon
									name="close" size="18" color="#fff" /></view>
						</view>
					</view>
					<view class="form-item">
						<text class="label">采样人员(签名)</text>
						<view class="upload-box" @click="!form.signSamplerUrl && onUploadSignature('sampler')">
							<image v-if="form.signSamplerUrl" :src="form.signSamplerUrl" class="upload-img"
								mode="aspectFit" @click.stop="previewSignature('sampler')" />
							<view v-else class="upload-inner">
								<u-icon name="plus" size="24" />
								<text class="up-txt">点击上传签名</text>
							</view>
							<view v-if="form.signSamplerUrl" class="remove-btn"
								@click.stop="removeSignature('sampler')"><u-icon name="close" size="18" color="#fff" />
							</view>
						</view>
					</view>
					<view class="form-item col-2">
						<text class="label">备注</text>
						<u-input v-model="form.remark" type="textarea" :autoHeight="true" placeholder="请输入备注" />
					</view>
					<view class="form-item">
						<text class="label">附件</text>
						<view class="upload-box" @click="onUploadAttachment">
							<image v-if="form.attachments" :src="form.attachments" class="upload-img" mode="aspectFit"
								@click.stop="previewAttachment" />
							<view v-else class="upload-inner">
								<u-icon name="plus" size="24" />
								<text class="up-txt">点击上传附件</text>
							</view>
							<view v-if="form.attachments" class="remove-btn" @click.stop="removeAttachment"><u-icon
									name="close" size="16" color="#fff" /></view>
						</view>
					</view>
				</view>
			</view>

			<view class="footer-spacer" />
		</view>

		<!-- 天地图选择器（非 inline，按需弹出） -->
		<zhuo-tianditu-select ref="tMap" :api-key="mapApiKey" :icon="mapIcon" @onLoad="onMapLoad" @onSelect="onMapSelect" />
		<view class="confrim" @click="confrim">确定</view>
	</view>
</template>

<script>
import {
	chouyangdetail,
	exitchouyang
} from '@/api/sylin/index.js'
const config = require('@/config')
import { getToken } from '@/utils/auth'
export default {
	data() {
		return {
			// 天地图 API Key（复用项目内已使用的 Key，如需变更可改为从配置读取）
			mapApiKey: '80485f9d414a68e137dc073101f7900f',
			// 地图图标
			mapIcon: null,
			// 路由入参与详情原始数据
			routeId: '',
			rawDetail: {},
			form: {
				// 基本信息
				taskSource: '',
				sampleNo: '',
				site: '',
				checkType: '',
				// 采样样品信息
				sampleName: '',
				variety: '',
				plantArea: '',
				yield: '',
				unitPrice: '',
				sampleNumber: '',
				sampleTime: '',
				cert: '',
				brand: '',
				labNo: '',
				isExpired: '',
				// 受检单位（个人）
				orgName: '',
				linkman: '',
				mobile: '',
				location: '',
				address: '',
				// 坐标（选点后写入）
				lon: '',
				lat: '',
				// 下达任务单位
				assignOrg: '',
				assignAddr: '',
				// 签章
				sampler: '',
				remark: '',
				// 上传交互
				signOrgUrl: '',
				signSamplerUrl: '',
				attachments: ''
			}
		};
	},
	computed: {
		navbarHeight() {
			// 如果设置了自定义高度，则使用自定义高度
			if (this.customNavbarHeight) {
				return this.customNavbarHeight;
			}
			// 否则自动计算：状态栏高度 + 导航栏高度
			const systemInfo = uni.getSystemInfoSync();
			// 将px转换为rpx (1px = 2rpx)
			const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
			const navbarHeightRpx = 44 * 2; // 44px = 88rpx
			return statusBarHeightRpx + navbarHeightRpx;
		},
	},
	onLoad(options) {
		this.routeId = (options && options.id) ? options.id : ''
		if (this.routeId) {
			this.getchouyangdetail(this.routeId)
		} else {
			uni.showToast({
				title: '缺少ID',
				icon: 'none'
			})
		}
		this.initMapIcon()
	},
	methods: {
		// 初始化地图图标
		initMapIcon() {
			// 自定义图片 - 参考官方示例
			const that = this
			uni.getImageInfo({
				src: '/static/0c61bddbe22455f0f1532005e0507bd6.png', // 使用现有的图标
				success(res) {
					that.mapIcon = res.path
					console.log('地图图标加载成功:', res.path)
				},
				fail(err) {
					console.log('地图图标加载失败:', err)
					that.mapIcon = null
				}
			})
		},
		async confrim() {
			const payload = this.buildSubmitPayload()
			const res = await exitchouyang(payload)
			console.log(res)
			uni.showToast({
				icon: 'none',
				title: '修改成功'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		},
		async getchouyangdetail(id) {
			try {
				const res = await chouyangdetail({
					id
				})
				const detail = (res && res.data) ? res.data : res
				this.rawDetail = detail || {}
				this.form = this.hydrateFromDetail(this.rawDetail)
			} catch (e) {
				console.error('getchouyangdetail error', e)
			}
		},
		buildSubmitPayload() {
			// 以详情原始对象为基准，合并页面可编辑字段并反向映射字段名
			const d = {
				...(this.rawDetail || {})
			}
			// 确保 id 存在
			d.id = d.id || d.ID || this.routeId
			// 基本信息
			d.taskSource = this.form.taskSource
			d.sampleCode = this.form.sampleNo
			d.detectionPlace = this.form.site
			// 检测类型：尽量映射回编码；否则保留文本
			const revTypeMap = {
				'风险监测': 'F',
				'监督抽检': 'J',
				'评价性抽检': 'P'
			}
			d.detectionType = revTypeMap[this.form.checkType] || d.detectionType || this.form.checkType
			// 采样样品信息
			d.sampleName = this.form.sampleName
			// 同时维护扩展字段（如果后端使用 ext6/productCode）
			d.ext6 = this.form.variety
			d.productCode = d.productCode || this.form.variety
			d.planteArea = this.form.plantArea
			d.perYield = this.form.yield
			d.unitPrice = this.form.unitPrice
			d.sampleNumber = this.form.sampleNumber
			d.sampleTime = this.form.sampleTime
			d.sampleCertification = this.form.cert
			d.trademark = this.form.brand
			d.laboratoryCode = this.form.labNo
			// 是否超期：转 0/1，保底保留原值
			const v = (this.form.isExpired || '').toString().toLowerCase()
			d.isOverdue = (v === '是' || v === '1' || v === 'true') ? 1 : (v === '否' || v === '0' || v === 'false') ? 0 : (d
				.isOverdue ?? '')
			// 受检单位（个人）与联系信息
			d.ext3 = this.form.orgName
			d.department = d.department || this.form.orgName
			d.ext4 = this.form.linkman
			d.person = this.form.linkman
			d.ext5 = this.form.mobile
			d.contactPhone = this.form.mobile
			d.phone = this.form.mobile
			// 定位与地址
			d.location = this.form.location
			d.address = this.form.address
			d.lon = this.form.lon
			d.lat = this.form.lat
			// 下达任务单位
			d.ext7 = this.form.assignOrg
			d.assignOrg = this.form.assignOrg
			d.ext8 = this.form.assignAddr
			d.assignAddr = this.form.assignAddr
			// 签章与备注
			d.ext9 = this.form.sampler
			d.sampler = this.form.sampler
			d.ext12 = this.form.remark
			d.remark = this.form.remark
			// 附件与签名（字符串）
			d.signOrgUrl = this.form.signOrgUrl
			d.signSamplerUrl = this.form.signSamplerUrl
			d.attachments = this.form.attachments
			return d
		},
		hydrateFromDetail(d) {
			// 检测类型码 -> 文案
			const typeMap = {
				F: '风险监测',
				J: '监督抽检',
				P: '评价性抽检'
			}
			// isOverdue 转文案
			const overdueText = (v) => {
				if (v === null || v === undefined || v === '') return ''
				const s = String(v)
				return (s === '1' || s.toLowerCase() === 'true') ? '是' : (s === '0' || s.toLowerCase() === 'false') ? '否' : s
			}
			return {
				// 基本信息
				taskSource: d.taskSource || '山东省自然资源厅',
				sampleNo: d.sampleCode || '',
				site: d.detectionPlace || '',
				checkType: typeMap[d.detectionType] || d.detectionType || '',
				// 采样样品信息
				sampleName: d.sampleName || d.product || '',
				variety: d.ext6 || d.productCode || '',
				plantArea: d.planteArea ?? '',
				yield: d.perYield ?? '',
				unitPrice: d.unitPrice ?? '',
				sampleNumber: d.sampleNumber ?? '',
				sampleTime: d.sampleTime || '',
				cert: d.sampleCertification || '',
				brand: d.trademark || '',
				labNo: d.laboratoryCode || '',
				isExpired: overdueText(d.isOverdue),
				// 受检单位（个人）
				orgName: d.ext3 || d.department || '',
				linkman: d.ext4 || d.person || '',
				mobile: d.ext5 || d.contactPhone || d.phone || '',
				location: d.location || '',
				address: d.address || '',
				// 下达任务单位
				assignOrg: d.ext7 || d.assignOrg || '山东省自然资源厅',
				assignAddr: d.ext8 || d.assignAddr || '',
				// 签章
				sampler: d.ext9 || d.sampler || d.person || '',
				remark: d.ext12 || d.remark || '',
				// 上传（如接口返回地址可还原）
				signOrgUrl: d.signOrgUrl || '',
				signSamplerUrl: d.signSamplerUrl || '',
				attachments: Array.isArray(d.attachments) ? (d.attachments[0] || '') : (typeof d.attachments === 'string' ? d
					.attachments : '')
			}
		},
		onChooseLocation() {
			// 打开天地图选择器（非 inline 模式默认全屏弹出）
			if (!this.mapApiKey || String(this.mapApiKey).includes('填入')) {
				return uni.showToast({
					title: '请先配置有效的天地图API Key',
					icon: 'none'
				})
			}
			const tmap = this.$refs.tMap
			if (!tmap) {
				return uni.showToast({
					title: '地图组件未就绪',
					icon: 'none'
				})
			}
			
			// 如果表单中已有坐标，直接使用
			if (this.form.lon && this.form.lat) {
				try {
					if (typeof tmap.open === 'function') {
						return tmap.open(parseFloat(this.form.lon), parseFloat(this.form.lat))
					}
				} catch (e) {
					console.warn('打开天地图失败', e)
				}
				return
			}
			
			// 获取当前位置
			this.getCurrentLocationForMap(tmap)
		},
		
		// 获取当前位置用于地图显示
		getCurrentLocationForMap(tmap) {
			uni.showLoading({
				title: '获取位置中...'
			})
			
			uni.getLocation({
				type: 'gcj02',
				altitude: false,
				success: (res) => {
					uni.hideLoading()
					console.log('获取到当前位置:', res)
					
					try {
						if (typeof tmap.open === 'function') {
							// 使用当前位置打开地图
							tmap.open(res.longitude, res.latitude)
						}
					} catch (e) {
						console.warn('打开天地图失败', e)
						uni.showToast({
							title: '打开地图失败',
							icon: 'none'
						})
					}
				},
				fail: (err) => {
					uni.hideLoading()
					console.error('获取位置失败:', err)
					
					// 获取位置失败，使用默认坐标（北京天安门）
					uni.showToast({
						title: '获取位置失败，使用默认位置',
						icon: 'none',
						duration: 2000
					})
					
					try {
						if (typeof tmap.open === 'function') {
							// 默认北京天安门坐标
							tmap.open(116.397128, 39.916527)
						}
					} catch (e) {
						console.warn('打开天地图失败', e)
						uni.showToast({
							title: '打开地图失败',
							icon: 'none'
						})
					}
				}
			})
		},
		onMapLoad() {
			// 地图资源加载完成回调（可按需提示或埋点）
			// console.log('天地图加载完成')
		},
		onMapSelect(value) {
			// 选点回填地址与经纬度
			if (value) {
				if (value.address) {
					// 地址同时回显到“采样点定位”和“采样地点”
					this.form.location = value.address
					this.form.address = value.address
				}
				if (value.location) {
					this.form.lon = value.location.lon
					this.form.lat = value.location.lat
				}
			}
		},
		async onUploadSignature(type) {
			console.log('开始上传签名，类型:', type)
			try {
				// 1. 选图
				const r = await uni.chooseImage({ count: 1, sizeType: ['compressed'] })
				// 兼容平台差异：部分真机返回数组 [null, obj]
				const chooseRes = Array.isArray(r) ? r.find(i => i && i.tempFilePaths) || r[1] : r
				const path = chooseRes?.tempFilePaths?.[0] || chooseRes?.tempFiles?.[0]?.path
				if (!path) {
					console.log('未选择图片')
					return
				}

				// 2. 上传
				uni.showLoading({ title: '上传中...' })
				const uploadUrl = config.baseUrl + '/file/upload'
				const token = getToken()
				const upRes = await uni.uploadFile({
					url: uploadUrl,
					filePath: path,
					name: 'file',
					header: { Authorization: 'Bearer ' + token }
				})

				// 3. 解析返回数据（兼容数组/对象）
				const uploadItem = Array.isArray(upRes) ? upRes.find(i => i && i.data) || upRes[1] : upRes
				const rawData = uploadItem?.data
				if (!rawData) throw new Error('上传接口未返回 data')

				const result = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
				if (!result || result.code !== 200) throw new Error(result?.msg || '上传失败')

				// 4. 回填
				const url = result.data?.url || result.data?.name
				if (type === 'org') this.form.signOrgUrl = url
				else this.form.signSamplerUrl = url

				uni.hideLoading()
				uni.showToast({ title: '上传成功', icon: 'success' })
			} catch (e) {
				uni.hideLoading()
				console.error('上传签名失败:', e)
				uni.showToast({ title: e.message || '上传失败', icon: 'none' })
			}
		},
		previewSignature(type) {
			const url = type === 'org' ? this.form.signOrgUrl : this.form.signSamplerUrl
			if (!url) return
			uni.previewImage({
				urls: [url],
				current: url
			})
		},
		removeSignature(type) {
			if (type === 'org') this.form.signOrgUrl = ''
			else this.form.signSamplerUrl = ''
		},
		async onUploadAttachment() {
			console.log('开始上传附件')
			try {
				// 1. 选图
				const r = await uni.chooseImage({ count: 1, sizeType: ['compressed'] })
				const chooseRes = Array.isArray(r) ? r.find(i => i && i.tempFilePaths) || r[1] : r
				const path = chooseRes?.tempFilePaths?.[0] || chooseRes?.tempFiles?.[0]?.path
				if (!path) return

				// 2. 上传
				uni.showLoading({ title: '上传中...' })
				const uploadUrl = config.baseUrl + '/file/upload'
				const token = getToken()
				const upRes = await uni.uploadFile({
					url: uploadUrl,
					filePath: path,
					name: 'file',
					header: { Authorization: 'Bearer ' + token }
				})

				// 3. 解析返回（兼容数组/对象）
				const uploadItem = Array.isArray(upRes) ? upRes.find(i => i && i.data) || upRes[1] : upRes
				const rawData = uploadItem?.data
				if (!rawData) throw new Error('接口未返回 data')

				const result = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
				if (!result || result.code !== 200) throw new Error(result?.msg || '上传失败')

				// 4. 回填
				this.form.attachments = result.data?.url || result.data?.name
				uni.hideLoading()
				uni.showToast({ title: '上传成功', icon: 'success' })
			} catch (e) {
				uni.hideLoading()
				console.error('上传附件失败:', e)
				uni.showToast({ title: e.message || '上传失败', icon: 'none' })
			}
		},
		previewAttachment() {
			if (!this.form.attachments) return
			uni.previewImage({
				urls: [this.form.attachments],
				current: this.form.attachments
			})
		},
		removeAttachment() {
			this.form.attachments = ''
		}
	}
}
</script>

<style lang="scss" scoped>
$green: #19b35b;
$green-2: #23a44b;
$bg: #f5f8f6;
$card: #ffffff;
$text: #333;
$sub: #666;
$line: #e8f3ec;

.confrim {
	width: 710rpx;
	height: 88rpx;
	background: linear-gradient(180deg, #28D446 0%, #169D29 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	font-weight: bold;
	font-size: 30rpx;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 20rpx;
}

.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	z-index: 1;
}

.page {
	background: $bg;
	min-height: 100vh;
}

.content {
	padding: 20rpx;
}

.page-title {
	margin: 20rpx 0 10rpx;
	text-align: center;
	font-weight: 700;
	color: $text;
	font-size: 34rpx;
}

.card {
	background: $card;
	border-radius: 16rpx;
	padding: 20rpx;
	box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.06);
	margin-bottom: 18rpx;
	border: 1rpx solid $line;
}

.section-title {
	display: flex;
	align-items: center;
	gap: 12rpx;
	color: $text;
	font-size: 30rpx;
	font-weight: 600;
	margin-bottom: 14rpx;
}

.section-title .dot {
	width: 14rpx;
	height: 14rpx;
	border-radius: 50%;
	background: $green;
	box-shadow: 0 0 0 6rpx rgba(25, 179, 91, 0.12);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16rpx 18rpx;
}

.form-item {
	display: flex;
	flex-direction: column;
}

.form-item.col-2 {
	grid-column: span 2;
}

.label {
	color: $sub;
	font-size: 26rpx;
	margin-bottom: 8rpx;
}

.label.required::before {
	content: '*';
	color: #f56c6c;
	margin-right: 6rpx;
}

.inline {
	display: flex;
	align-items: center;
}

.flex-1 {
	flex: 1;
}

.ml8 {
	margin-left: 12rpx;
	width: 132rpx;
	height: 52rpx;
	background: #0B993C;
	border-radius: 32rpx 32rpx 32rpx 32rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}

// 图片网格占位
.image-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12rpx;
	margin-top: 16rpx;
}

.img-box {
	background: #f2fbf6;
	border: 1rpx dashed #bde6cd;
	border-radius: 12rpx;
	width: 100%;
	padding-bottom: 66%; // 3:2 占位
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-box>* {
	position: absolute;
}

// 上传占位
.upload-box {
	width: 200rpx; // 固定宽度
	height: 120rpx; // 固定高度
	border: 2rpx dashed #bde6cd;
	background: #f6fcf8;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden; // 关键：裁剪溢出
}

.upload-inner {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.upload-img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 8rpx;
}

.remove-btn {
	position: absolute;
	top: 8rpx;
	right: 8rpx;
	width: 40rpx;
	height: 40rpx;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.attachments-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12rpx;
	margin-top: 12rpx;
}

.thumb {
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	background: #f2fbf6;
	border: 1rpx dashed #bde6cd;
	border-radius: 10rpx;
	overflow: hidden;
}

.thumb-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.up-txt {
	color: $green-2;
	font-size: 26rpx;
}

.footer-spacer {
	height: 40rpx;
}
</style>